<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="500px"
    @close="close"
  >
    <el-alert
      v-show="row.feedbackStatus === 0"
      :closable="false"
      show-icon
      type="warning"
    >
      <template #title>
        处理结果关乎平台发展性，您的处理记录也会被保存，请谨慎处理。
        <br />
        请虚心且尊重每一位用户的意见，如恶意驳回您的账号将会被封禁。
      </template>
    </el-alert>
    <div style="margin-bottom: 15px">
      <el-descriptions
        border
        class="margin-top"
        :column="1"
        size="mini"
        title=""
      >
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-user"></i>
            申请用户
          </template>
          {{ row.userName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-tickets"></i>
            反馈内容
          </template>
          {{ row.feedbackContent }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-picture"></i>
            附图
          </template>
          <el-image
            v-if="row.feedbackImage != null"
            :preview-src-list="imageList"
            :src="row.feedbackImage"
            style="height: 60px; width: 60px"
          />
          <span v-else>/</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-time"></i>
            创建时间
          </template>
          {{ row.createTime == null ? '/' : formatDates(row.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-time"></i>
            处理时间
          </template>
          {{ row.updateTime == null ? '/' : formatDates(row.updateTime) }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-alert
      v-if="parseInt(row.feedbackStatus) > 0"
      :closable="false"
      show-icon
      type="info"
    >
      <template #title>
        该反馈已被管理员
        <B>{{ row.adminName }}</B>
        处理并
        <span v-if="row.feedbackStatus === 1" style="color: #009688">采纳</span>
        <span v-else style="color: #f34d37">未被采纳</span>
        ，可在“处理记录”中查看详情
      </template>
    </el-alert>
    <el-form
      v-show="row.feedbackStatus === 0"
      ref="formRef"
      label-width="80px"
      :model="form"
      :rules="rules"
    >
      <el-form-item label="反馈结果" prop="resultMsg">
        <el-input
          v-model.trim="form.resultMsg"
          maxlength="100"
          placeholder="请说明处理原因"
          type="textArea"
        />
      </el-form-item>
    </el-form>
    <div
      v-show="parseInt(row.feedbackStatus) === 0"
      style="display: flex; justify-content: space-around"
    >
      <el-button
        style="background: #009688; color: #ffffff"
        @click="save(true)"
      >
        处理（通过）
      </el-button>
      <el-button
        style="background: #ff5722; color: #ffffff"
        @click="save(false)"
      >
        驳回（不通过）
      </el-button>
    </div>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue'
  import { doEdit } from '@/api/feedback_advice'
  import moment from '_moment@2.29.1@moment'

  export default defineComponent({
    name: 'TableEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const { proxy } = getCurrentInstance()
      const state = reactive({
        formRef: null,
        title: null,
        list: [],
        row: null,
        imageList: [],
        form: {
          resultMsg: '',
          feedbackId: null,
          code: null,
        },
        rules: {
          resultMsg: [
            { required: true, trigger: 'blur', message: '必须说明处理原因' },
          ],
        },
        dialogFormVisible: false,
      })

      const showEdit = (row) => {
        if (!row) {
          proxy.$baseMessage('数据异常', 'error', 'vab-hey-message-error')
          state.dialogFormVisible = false
        } else {
          state.title = '反馈处理'
          // state.form = Object.assign({}, row)
          state.form.feedbackId = row.feedbackId
          state.imageList.push(row.feedbackImage)
          state.row = row
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          resultMsg: '',
          feedbackId: null,
          code: null,
        }
        state.dialogFormVisible = false
        state.row = null
      }
      const save = (isPass) => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            state.form.code = isPass
            proxy.$baseConfirm(
              isPass
                ? '确认通过吗？被举报人将会受到封号处罚'
                : '确认驳回吗？该过程不可撤销',
              '确认提示',
              async () => {
                const { msg } = await doEdit(state.form)
                proxy.$baseMessage(msg, 'success', 'vab-hey-message-success')
                emit('fetch-data')
                close()
              }
            )
          }
        })
      }

      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
      }
    },
    mounted() {},
    methods: {
      formatDates(dateStr) {
        let pattern = 'YYYY-MM-DD HH:mm'
        return moment(parseInt(dateStr + '000')).format(pattern)
      },
    },
  })
</script>
<style>
  /deep/ .el-descriptions__cell,
  .el-descriptions__label,
  .is-bordered-label,
  .is-left {
    width: 80px !important;
  }
</style>
